<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<%@ taglib tagdir="/WEB-INF/tags" prefix="matrix"%>
<%@ taglib uri="http://matrixcsm.zkingsoft.com" prefix="cms"%>
<cms:ads   code="'ZY_JiaTuoXinCai_0',
'ZY_ShouYe_1',
'ZY_XingYeYingYong_2',
'ZY_LianXiWoMen_3',
'ZY_ZhongWen_4',
'ZY_5_5',
'nglis_6',
'ZY_BingChengGongJiangJingShen_7',
'ZY_TiGongQuanFangWeiQing_8',
'ZY_XinXingGaoQiangXiTu_9',
'ZY_FuHeBan_10',
'ZY_JuYouGaoQiangQing_11',
'img_16084167',
'ZY_FuShouGan_13',
'ZY_CaiYong_14',
'img_90649703',
'ZY_XingLiJia_16',
'ZY_ShiYong_17',
'img_510995829',
'ZY_FuHeBan_19',
'ZY_FuShouGan_20',
'ZY_XingLiJia_21',
'ZY_FangZhuangLiang_22',
'ZY_KangLa_23',
'img_738596954',
'ZY_XinNengYuanQiCheDian_25',
'ZY_JuYouYouLiangDeNai_26',
'img_196477407',
'ZY_QiCheMengPi_28',
'ZY_KangLa_29',
'img_78509133',
'ZY_QiCheJieGouJian_31',
'ZY_KeJiYaFuZaKong_32',
'img_606001900',
'ZY_FangZhuangLiang_34',
'ZY_XinNengYuanQiCheTuo_35',
'ZY_QiCheMengPi_36',
'ZY_QiCheJieGouJian_37',
'ZY_ChuanJianXingYe_38',
'ZY_XinXingXiTuLvHe_39',
'img_889415200',
'img_496927541',
'ZY_ShiYouXingYe_42',
'ZY_ZhuYaoYingYongYuShi_43',
'img_842576728',
'img_368383162',
'ZY_YunDongXingYe_46',
'ZY_ZhuYaoYingYongYuGao_47',
'img_230750779',
'img_849931629',
'ZY_ChuanJianXingYe_50',
'ZY_ShiYouXingYe_51',
'ZY_YunDongXingYe_52',
'ZY_ShouJiZhongKuang_53',
'ZY_KangLa_54',
'img_800844411',
'ZY_DianNaoDianBan_56',
'ZY_ChanPinGengJiaQingBo_57',
'img_381646189',
'ZY_XiangJi_59',
'ZY_YouLiangDeZheSeHe_60',
'img_384532830',
'ZY_WanBiao_62',
'ZY_KeYaZhuHuoJiYa_63',
'img_220808739',
'ZY_ShouJiZhongKuang_65',
'ZY_DianNaoDianBan_66',
'ZY_XiangJi_67',
'ZY_WanBiao_68',
'ZY_XinXingGaoQiangXiTu_69',
'ZY_GaoBiQiangDu_70',
'ZY_JiaGongXingNeng_71',
'ZY_MiDu_72',
'ZY_JiYaXiShu_73',
'ZY_HanJieXiShu_74',
'ZY_ZheSeXingNeng_75',
'ZY_HanJieXiShu_76',
'ZY_YangJiYangHuaWei_77',
'img_75754326',
'ZY_DianHua_79',
'img_178293374',
'ZY_YouXiang_81',
'img_617616386',
'ZY_DiZhiZhangShaShi_83',
'ZY_JiaTuoKeJiFaZhan_84',
'img_523283257',
'ZY_HOMEIMG_0',
'ZY_HOMEIMG_2',
'ZY_FuHeBan_19',
'ZY_FangZhuangLiang_34',
'ZY_ChuanJianXingYe_50',
'ZY_ShouJiZhongKuang_65',
'ZY_HOMEIMG_111'
"  ></cms:ads>
<!doctype html>
<html>
 <head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
  <link rel="icon" sizes="any" href="${浏览器logo}">
  <title>佳拓新材</title>
  <meta name="viewport" content="width=device-width,initial-scale=1.0"> 
  <link rel="stylesheet" href="http://file.micromall.xczhyf.cn/uploadeFile/gt/pc/css/swiper.min.css"> 
  <link rel="stylesheet" href="http://file.micromall.xczhyf.cn/uploadeFile/gt/pc/css/animate.min.css"> 
  <script src="http://file.micromall.xczhyf.cn/uploadeFile/gt/pc/js/swiper.min.js"></script> 
  <script src="http://file.micromall.xczhyf.cn/uploadeFile/gt/pc/js/swiper.animate.min.js"></script> 
  <style>*{ margin:0; padding:0; } html,body{ height:100%; } body{ font-family:"microsoft yahei"; } .swiper-container { width: 100%; height: 100%; background:#000; } img{ display:block; } .swiper-pagination-bullet-active { opacity: 1; } @-webkit-keyframes start { 0%,30% {opacity: 0;-webkit-transform: translate(0,10px);} 60% {opacity: 1;-webkit-transform: translate(0,0);} 100% {opacity: 0;-webkit-transform: translate(0,-8px);} } @-moz-keyframes start { 0%,30% {opacity: 0;-moz-transform: translate(0,10px);} 60% {opacity: 1;-moz-transform: translate(0,0);} 100% {opacity: 0;-moz-transform: translate(0,-8px);} } @keyframes start { 0%,30% {opacity: 0;transform: translate(0,10px);} 60% {opacity: 1;transform: translate(0,0);} 100% {opacity: 0;transform: translate(0,-8px);} } .ani{ position:absolute; } .txt{ position:absolute; } .ys{ padding-left: 122px; font-size:60px;color:#FCFDFE;font-family:Lantinghei SC;font-weight:600; } .co_e5{ color:#E5F3FF;font-size:36px;padding-left: 122px; } .bg_img{ width:100%; height: 100%; } .index_bg_1{  -webkit-background-size: 100%; background-size: 100% 100%; } .header{ height: 80px; width:100%; background: #FFFFFF; position: fixed; z-index: 99; } .flex_bet{ display: flex; justify-content: space-between; } .flex_align{ display: flex; align-items: center; } .logo{ width:40%; font-size:36px; font-family:'FZZongYi-M05S'; font-weight:400; color:rgba(15,98,200,1);  } .router{ margin-left: 10%; /* width: 50%; */ display: flex; } .routerItem{ width:140px !important; height:80px; text-align: center; line-height: 80px; cursor: pointer; margin-left: 60px; } .flex{ display: flex; } .check{ width:140px; height:80px; text-align: center; margin-left: 60px; margin-right: 60px; } .pointer{ cursor: pointer; } .plpr5{ padding-left: 5px; padding-right: 5px; } .checked{ color:#0F62C8 } .routerItem:hover{ background-color: #1065C6; color:#fff; } .active{ background-color: #1065C6; color:#fff; height:80px } .index_bg_2{ background-image: url('${ZY_FuHeBan_19.adImg}') ; position: relative; -webkit-background-size: 100%; background-size: 100% 100%; } .positions{ position: absolute; width:100%; height:90px; bottom:0px; display: flex; justify-content: space-between; } .bottomBlock{ background:rgba(16,101,198,1); opacity:0.88; text-align: center; line-height: 90px; color:#fff; font-size:32px; font-family:PingFang SC; font-weight:600; cursor: pointer; } .bottomBlock:hover{ background:rgba(16,101,198,1); opacity:0.42; } .bottomBlocks{ background:rgba(16,101,198,1); opacity:0.88; text-align: center; line-height: 90px; color:#fff; font-size:32px; font-family:PingFang SC; font-weight:600; cursor: pointer; } .bottomBlocks:hover{ background:rgba(16,101,198,1); opacity:0.42; } .index_bg_3{ background-image: url('${ZY_FangZhuangLiang_34.adImg}') ; position: relative; -webkit-background-size: 100%; background-size: 100% 100%; } .w_33{ width:33.2%; } .w_25{ width:24.9% } .index_bg_4{ background-image: url('${ZY_ChuanJianXingYe_50.adImg}') ; position: relative; -webkit-background-size: 100%; background-size: 100% 100%; } .index_bg_5{ background-image: url('${ZY_ShouJiZhongKuang_65.adImg}') ; position: relative; -webkit-background-size: 100%; background-size: 100% 100%; } .positionsRight{ position: relative; left: 100%; top:260px; } .positionsLeft{ position: relative; left: 48%; top:30%; } .positionsLefts{ position: relative; left: 40%; top:30%; } .ft48{ font-size: 48px; color:#fff; padding-left: 122px; } .ft36{ font-size:36px; font-family:PingFang SC; font-weight:400; color:#fff; padding-left: 122px; } .ft24{ font-size:24px; font-family:PingFang SC; font-weight:400; color:rgba(111,184,244,1); display: block; } .w305{ width:305px } .pl122{ padding-left: 122px; margin-top:50px } .w580{ width:580px; } .footer{ background:rgba(255,255,255,.3); position: absolute; width:100%; height:90px; bottom:0px; display: flex; justify-content: center; } .co_fff{ color:#fff; } .w_80{ width:80% } .warpMask{ height:100%; width:100%; background: rgba(0,0,0,.8); } .imgPic{ width:628px; height:406px; } .smallImg{ width:448px; height:402px } .ml30{ margin-left: 30px; } .w25h12{ width:15px; height:12px } .ml5{ margin-left: 5px; }
  @media screen and (min-width: 750px) and (max-width:1600px){
   .imgPic{
    width:428px;
    height:306px;
   }
   .positionsLeft{
    position: relative;
    left: 58%;
    top: 30%;
   }
   .smallImg{
    width:348px;
    height:302px
   }
   .positionsRight{
    position: relative;
    left: 100%;
    top:210px;
   }
   .imgPicFooter{
    width:460px;
    height:285px;
   }


   .ys{ padding-left: 122px; font-size:40px;color:#FCFDFE;font-family:Lantinghei SC;font-weight:600; }
   .co_e5{
    color:#E5F3FF;font-size:20px;padding-left: 122px;
   }
   .ft48{font-size: 30px;}
   .ft36{font-size: 18px;}
   .ft24{font-size: 14px;}
   .w305{width:230px}
  }
  .logo_img{
   width: 48px;
   margin-top: -2px;
   object-fit: contain;
   padding-left: 50px;
   padding-right: 10px;
  }
  </style>
  <meta name="keywords" content="${网页关键词}">
  <meta name="description" content="${网页描述 }">
 </head> 
 <body> 
  <div class="header flex_bet flex_align">
   <img src="${ZY_HOMEIMG_111.adImg}" resize alt="" class="logo_img" data-type="ad" data-id="${ZY_HOMEIMG_111.adId}">

   <div class="logo zy" data-type="ad" data-id="${ZY_JiaTuoXinCai_0.adId}">
    ${ZY_JiaTuoXinCai_0.adTitle}
   </div> 
   <div class="router"> 
    <div class="routerItem active zy" data-type="ad" data-id="${ZY_ShouYe_1.adId}">
     ${ZY_ShouYe_1.adTitle}
    </div> 
    <div class="routerItem zy" data-type="ad" data-id="${ZY_XingYeYingYong_2.adId}">
     ${ZY_XingYeYingYong_2.adTitle}
    </div> 
    <div class="routerItem zy" data-type="ad" data-id="${ZY_LianXiWoMen_3.adId}">
     ${ZY_LianXiWoMen_3.adTitle}
    </div> 
    <div class="flex_align check"> 
     <div class="pointer checked zy" id="cn" style="width:70px" data-type="ad" data-id="${ZY_ZhongWen_4.adId}">
      ${ZY_ZhongWen_4.adTitle}
     </div> 
     <div class="plpr5 zy" data-type="ad" data-id="${ZY_5_5.adId}">
      ${ZY_5_5.adTitle}
     </div> 
     <div class="pointer zy" id="en" style="width:80px" data-type="ad" data-id="${nglis_6.adId}">
      ${nglis_6.adTitle}
     </div> 
    </div> 
   </div> 
  </div> 
  <div class="swiper-container">
   <div class="swiper-wrapper">
    <section class="swiper-slide swiper-slide1 index_bg_1">
     <img src="${ZY_HOMEIMG_0.adImg}" alt="">

     <div class="ys ani resize zy" style="top:260px;left:120px" swiper-animate-effect="zoomIn" swiper-animate-duration="1.5s" swiper-animate-delay="0s" data-type="ad" data-id="${ZY_BingChengGongJiangJingShen_7.adId}">
      ${ZY_BingChengGongJiangJingShen_7.adTitle}
     </div>
     <div class="co_e5 ani resize zy" style="top:430px;left:120px" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="1.5s" data-type="ad" data-id="${ZY_TiGongQuanFangWeiQing_8.adId}">
      ${ZY_TiGongQuanFangWeiQing_8.adTitle}
     </div>
     <div class="co_e5 ani resize zy" style="top:490px;left:120px" swiper-animate-effect="rotateInDownLeft" swiper-animate-duration="0.5s" swiper-animate-delay="2s" id="banner1" data-type="ad" data-id="${ZY_XinXingGaoQiangXiTu_9.adId}">
      ${ZY_XinXingGaoQiangXiTu_9.adTitle}
     </div>
    </section>
   </div>
   <section class="swiper-slide swiper-slide2 index_bg_2">

     <cms:ad var="frame" code="frame"></cms:ad>
     <c:forEach items="${frame }" var="item">
      <div style="display: none;" class="warpMask">
       <div class="ys ani resize zy" style="top:260px;" swiper-animate-effect="zoomIn" swiper-animate-duration="1.5s" swiper-animate-delay="0s" data-type="ad" data-id="${ZY_FuHeBan_10.adId}">
         ${item.adTitle}
       </div>
       <div class="co_e5 ani resize zy" style="top:360px;width:600px;" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="1.5s" data-type="ad" data-id="${ZY_JuYouGaoQiangQing_11.adId}">
         ${item.adInfo2}
       </div>
       <div class="positionsLeft">
        <img src="${item.adImg}" alt="" class="imgPic" data-type="ad" data-id="${img_16084167.adId}">
       </div>
      </div>
     </c:forEach>


     <div class="positions">
      <c:forEach items="${frame }" var="item">
       <div class="bottomBlock w_33" data-imgsrc="${item.adInfo6}" data-type="ad"
            data-id="${ZY_FuHeBan_19.adId}">
         ${item.adTitle}
       </div>
      </c:forEach>
     </div> 
    </section> 
    <section class="swiper-slide swiper-slide3 index_bg_3">
     <cms:ad var="car" code="car"></cms:ad>
     <c:forEach items="${car }" var="item">
      <div style="display: none;" class="warpMask">
       <div class="ys ani resize zy" style="top:260px;" swiper-animate-effect="zoomIn" swiper-animate-duration="1.5s" swiper-animate-delay="0s" data-type="ad" data-id="${ZY_FangZhuangLiang_22.adId}">
         ${item.adTitle}
       </div>
       <div class="co_e5 ani resize zy" style="top:360px;width:600px;" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="1.5s" data-type="ad" data-id="${ZY_KangLa_23.adId}">
         ${item.adInfo2}
       </div>
       <div class="positionsLeft">
        <img src="${item.adImg}" alt="" class="imgPic " data-type="ad" data-id="${img_738596954.adId}">
       </div>
      </div>
     </c:forEach>


     <div class="positions">
      <c:forEach items="${car }" var="item">

       <div class="bottomBlockTwo bottomBlocks w_25 zy" data-imgsrc="${item.adInfo6}" data-type="ad" data-id="${ZY_FangZhuangLiang_34.adId}">
         ${item.adTitle}
       </div>
      </c:forEach>
     </div> 
    </section> 






    <section class="swiper-slide swiper-slide5 index_bg_5">
     <cms:ad var="electronic" code="electronic"></cms:ad>
     <c:forEach items="${electronic }" var="item">

      <div style="display: none;" class="warpMask">
       <div class="ys ani resize zy" style="top:260px;" swiper-animate-effect="zoomIn" swiper-animate-duration="1.5s" swiper-animate-delay="0s" data-type="ad" data-id="${ZY_ShouJiZhongKuang_53.adId}">
         ${item.adTitle}
       </div>
       <div class="co_e5 ani resize zy" style="top:360px;width:600px;" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="1.5s" data-type="ad" data-id="${ZY_KangLa_54.adId}">
         ${item.adInfo2}
       </div>
       <div class="positionsLeft">
        <img src="${item.adImg}" alt="" class="imgPic zy" data-type="ad" data-id="${img_800844411.adId}">
       </div>
      </div>
     </c:forEach>



     <div class="positions">
      <c:forEach items="${electronic }" var="item">
       <div class="bottomBlockFour bottomBlocks w_25 zy" data-imgsrc="${item.adInfo6}" data-type="ad" data-id="${ZY_ShouJiZhongKuang_65.adId}">
         ${item.adTitle}
       </div>
      </c:forEach>

     </div> 
    </section>
    <section class="swiper-slide swiper-slide4 index_bg_4">
     <cms:ad var="ship" code="ship"></cms:ad>
     <c:forEach items="${ship }" var="item">
      <div style="display: none;" class="warpMask">
       <div class="ys ani resize zy" style="top:260px;" swiper-animate-effect="zoomIn" swiper-animate-duration="1.5s" swiper-animate-delay="0s" data-type="ad" data-id="${ZY_ChuanJianXingYe_38.adId}">
         ${item.adTitle}
       </div>
       <div class="co_e5 ani resize zy" style="top:360px;width:30%;" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="1.5s" data-type="ad" data-id="${ZY_XinXingXiTuLvHe_39.adId}">
         ${item.adInfo2}
       </div>
       <div class="positionsLefts flex">
        <img src="${item.adImg}" alt="" class="smallImg zy" data-type="ad" data-id="${img_889415200.adId}">
        <img src="${item.adInfo5}" alt="" class="smallImg ml30 zy" data-type="ad" data-id="${img_496927541.adId}">
       </div>
      </div>
     </c:forEach>


     <div class="positions">
      <c:forEach items="${ship }" var="item">

       <div class="bottomBlocks bottomBlockThree w_33 zy" data-imgsrc="${item.adInfo6}" data-type="ad" data-id="${ZY_ChuanJianXingYe_50.adId}">
         ${item.adTitle}
       </div>
      </c:forEach>
      <!-- <div class="bottomBlocks bottomBlockThree w_25" data-imgsrc="images/4.jpg">3C行业</div> -->
     </div>
    </section>
    <section class="swiper-slide swiper-slide1 index_bg_1">
     <img src="${ZY_HOMEIMG_2.adImg}" alt="" style="position: absolute;">
     <div class="flex"> 
      <div> 
       <div class="ft48 ani resize zy" style="top:30%;" swiper-animate-effect="zoomIn" swiper-animate-duration="1.5s" swiper-animate-delay="0s" data-type="ad" data-id="${ZY_XinXingGaoQiangXiTu_69.adId}">
        ${ZY_XinXingGaoQiangXiTu_69.adTitle}
       </div>

<%--       <div>--%>

<%--         <div>--%>
          <div class="ani resize " style="top:40%;" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="1.5s">
           <div class="flex w580">
            <span class="ft36 zy" data-type="ad" data-id="${ZY_GaoBiQiangDu_70.adId}">${ZY_GaoBiQiangDu_70.adTitle}</span>
           </div>

           <div class="ani resize pl122" style="top:0" swiper-animate-effect="rotateInDownLeft" swiper-animate-duration="0.5s" swiper-animate-delay="2s">
            <div class="flex w580">
             <span class="ft24 w305 zy" data-type="ad" data-id="${ZY_MiDu_72.adId}">${ZY_MiDu_72.adTitle}</span>

            </div>
           </div>

          </div>

          <div>
           <div class="ani resize " style="top:40%;margin-left:15%;" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="1.5s">
            <div class="flex w580">
             <span class="ft36 zy" data-type="ad" data-id="${ZY_JiaGongXingNeng_71.adId}">${ZY_JiaGongXingNeng_71.adTitle}</span>
            </div>

            <div class="ani resize pl122" style="top:0" swiper-animate-effect="rotateInDownLeft" swiper-animate-duration="0.5s" swiper-animate-delay="2s">
             <div class="flex w580">
              <span class="ft24 zy" data-type="ad" data-id="${ZY_JiYaXiShu_73.adId}">${ZY_JiYaXiShu_73.adTitle}</span>
             </div>
            </div>

           </div>

         </div>


          <div>

           <div>
            <div class="ani resize " style="top:54%;;" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="1.5s">
             <div class="flex w580">
              <span class="ft36 zy" data-type="ad" data-id="${ZY_HanJieXiShu_74.adId}">${ZY_HanJieXiShu_74.adTitle}</span>
             </div>

             <div class="ani resize pl122" style="top:0;" swiper-animate-effect="rotateInDownLeft" swiper-animate-duration="0.5s" swiper-animate-delay="2s">
              <div class="flex w580">
               <span class="ft24 w305 zy" data-type="ad" data-id="${ZY_HanJieXiShu_76.adId}">${ZY_HanJieXiShu_76.adTitle}</span>

              </div>
             </div>

            </div>

            <div>
             <div class="ani resize " style="top:54%;;margin-left:15%;" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="1.5s">
              <div class="flex w580">
               <span class="ft36 zy" data-type="ad" data-id="${ZY_ZheSeXingNeng_75.adId}">${ZY_ZheSeXingNeng_75.adTitle}</span>
              </div>

              <div class="ani resize pl122" style="top:0;" swiper-animate-effect="rotateInDownLeft" swiper-animate-duration="0.5s" swiper-animate-delay="2s">
               <div class="flex w580">
                <span class="ft24 zy" data-type="ad" data-id="${ZY_YangJiYangHuaWei_77.adId}">${ZY_YangJiYangHuaWei_77.adTitle}</span>
               </div>
              </div>

             </div>

            </div>

       </div>




      </div> 
      <div class="footer">
       <div class="w_80"> 
        <div class="flex_bet co_fff" style="padding-top:20px;"> 
         <div class="flex_align"> 
          <img src="${img_75754326.adImg}" alt="" class="w25h12 zy" data-type="ad" data-id="${img_75754326.adId}"> 
          <div class="ml5 zy" data-type="ad" data-id="${ZY_DianHua_79.adId}">
           ${ZY_DianHua_79.adTitle}
          </div> 
         </div> 
         <div class="flex_align"> 
          <img src="${img_178293374.adImg}" alt="" class="w25h12 zy" data-type="ad" data-id="${img_178293374.adId}"> 
          <div class="ml5 zy" data-type="ad" data-id="${ZY_YouXiang_81.adId}">
           ${ZY_YouXiang_81.adTitle}
          </div> 
         </div> 
         <div class="flex_align"> 
          <img src="${img_617616386.adImg}" alt="" class="w25h12 zy" data-type="ad" data-id="${img_617616386.adId}"> 
          <div class="ml5 zy" data-type="ad" data-id="${ZY_DiZhiZhangShaShi_83.adId}">
           ${ZY_DiZhiZhangShaShi_83.adTitle}
          </div> 
         </div> 
        </div> 
        <div style="text-align: center;padding-top: 10px;color:#0C1823" class="zy" data-type="ad" data-id="${ZY_JiaTuoKeJiFaZhan_84.adId}">
         ${ZY_JiaTuoKeJiFaZhan_84.adTitle}
        </div> 
       </div> 
      </div> 
      <div class="positionsRight"> 
       <img src="${img_523283257.adImg}" alt="" class="zy imgPicFooter" data-type="ad" data-id="${img_523283257.adId}">
      </div> 
     </div> 
     </div>
    </section>
   </div>
   <div class="swiper-pagination"></div>
  </div> 
  <script>  
scaleW=document.documentElement.clientWidth
scaleH=document.documentElement.clientHeight
var resizes = document.querySelectorAll('.resize');
    for (var j=0; j<resizes.length; j++) {
      // resizes[j].style.width=parseInt(scaleW)+'px'
      // resizes[j].style.height=parseInt(scaleH)+'px'
  }
  var mySwiper = new Swiper ('.swiper-container', {
   direction : 'vertical',
   pagination: '.swiper-pagination',
  //virtualTranslate : true,
   mousewheelControl : true,
   onInit: function(swiper){
    swiperAnimateCache(swiper);
    swiperAnimate(swiper);
	},
  onSlideChangeEnd: function(swiper){
    if(swiper.activeIndex==0){
      document.getElementsByClassName('routerItem')[0].classList.add("active");
      document.getElementsByClassName('routerItem')[1].classList.remove("active");
      document.getElementsByClassName('routerItem')[2].classList.remove("active");
    } else if (swiper.activeIndex>0&&swiper.activeIndex<5){
      document.getElementsByClassName('routerItem')[1].classList.add("active");
      document.getElementsByClassName('routerItem')[0].classList.remove("active");
      document.getElementsByClassName('routerItem')[2].classList.remove("active");
    } else {
      document.getElementsByClassName('routerItem')[2].classList.add("active");
      document.getElementsByClassName('routerItem')[0].classList.remove("active");
      document.getElementsByClassName('routerItem')[1].classList.remove("active");
    }
	  swiperAnimate(swiper);
  },
	onTransitionEnd: function(swiper){
	  swiperAnimate(swiper);
  },
	watchSlidesProgress: true,
  onProgress: function(swiper){
        for (var i = 0; i < swiper.slides.length; i++){
          var slide = swiper.slides[i];
          var progress = slide.progress;
          var translate = progress*swiper.height/4;  
          scale = 1 - Math.min(Math.abs(progress * 0.5), 1);
              var opacity = 1 - Math.min(Math.abs(progress/2),0.5);
              slide.style.opacity = opacity;
          es = slide.style;
          es.webkitTransform = es.MsTransform = es.msTransform = es.MozTransform = es.OTransform = es.transform = 'translate3d(0,'+translate+'px,-'+translate+'px) scaleY(' + scale + ')';
        }
      },
	onSetTransition: function(swiper, speed) {
      for (var i = 0; i < swiper.slides.length; i++){
        es = swiper.slides[i].style;
        es.webkitTransitionDuration = es.MsTransitionDuration = es.msTransitionDuration = es.MozTransitionDuration = es.OTransitionDuration = es.transitionDuration = speed + 'ms';
      }
    },
  })
// 绑定悬停事件 图1
let hoverList=document.getElementsByClassName('bottomBlock')
for (let i in hoverList){
 hoverList[i].onmouseover=function(){
  // this.parentNode.parentNode.style="background:url("+this.dataset.imgsrc+")"
  this.parentNode.parentNode.children[i].style='display:block';
  this.parentNode.parentNode.style="background:url("+this.dataset.imgsrc+");background-size: 100% 100%;"
 }
 hoverList[i].onmouseout=function(){
  console.log(this.dataset.imgsrc);
  this.parentNode.parentNode.children[i].style='display:none'
  this.parentNode.parentNode.style="background:url("+this.dataset.imgsrc+");background-size: 100% 100%;"
 }
}
// 绑定悬停事件 图2
let hoverListTwo=document.getElementsByClassName('bottomBlockTwo')
for (let i in hoverListTwo){
 hoverListTwo[i].onmouseover=function(){
  // this.parentNode.parentNode.style="background:url("+this.dataset.imgsrc+")"
  this.parentNode.parentNode.children[i].style='display:block';
  this.parentNode.parentNode.style="background:url("+this.dataset.imgsrc+");background-size: 100% 100%;"
 }
 hoverListTwo[i].onmouseout=function(){
  this.parentNode.parentNode.children[i].style='display:none'
  this.parentNode.parentNode.style="background:url("+this.dataset.imgsrc+");background-size: 100% 100%;"
 }
}
// 绑定悬停事件 图3
let hoverListThree=document.getElementsByClassName('bottomBlockThree')
for (let i in hoverListThree){
 hoverListThree[i].onmouseover=function(){
  // this.parentNode.parentNode.style="background:url("+this.dataset.imgsrc+")"
  this.parentNode.parentNode.children[i].style='display:block'
  this.parentNode.parentNode.style="background:url("+this.dataset.imgsrc+");background-size: 100% 100%;"
 }
 hoverListThree[i].onmouseout=function(){
  this.parentNode.parentNode.children[i].style='display:none'
  this.parentNode.parentNode.style="background:url("+this.dataset.imgsrc+");background-size: 100% 100%;"
 }
}
let hoverListFour=document.getElementsByClassName('bottomBlockFour')
for (let i in hoverListFour){
 hoverListFour[i].onmouseover=function(){
  // this.parentNode.parentNode.style="background:url("+this.dataset.imgsrc+")"
  this.parentNode.parentNode.children[i].style='display:block';
  this.parentNode.parentNode.style="background:url("+this.dataset.imgsrc+");background-size: 100% 100%;"
 }
 hoverListFour[i].onmouseout=function(){
  this.parentNode.parentNode.children[i].style='display:none'
  this.parentNode.parentNode.style="background:url("+this.dataset.imgsrc+");background-size: 100% 100%;"
 }
}

   var en = document.getElementById("en");
   en.onclick= function(){
    window.location.href='${path }/do/redirect/pc/index_en';
   }

  </script>   
 </body>
</html>